import Point from '../../Point.js';

/**
 * canvas shapes
 */
//====================== base utils
export function drawRoundRect(cxt, x, y, width, height, radius) {
    cxt.beginPath();
    cxt.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
    cxt.lineTo(width - radius + x, y);
    cxt.arc(width - radius + x, radius + y, radius, (Math.PI * 3) / 2, Math.PI * 2);
    cxt.lineTo(width + x, height + y - radius);
    cxt.arc(width - radius + x, height - radius + y, radius, 0, (Math.PI * 1) / 2);
    cxt.lineTo(radius + x, height + y);
    cxt.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
    cxt.closePath();
}
export function drawRoundRhombus(cxt, x, y, width, height, radius) {
    let o = { x: x + width / 2, y: y + height / 2 },
        dis = Math.sqrt((o.x - x) * (o.x - x) + (o.y - y) * (o.y - y)),
        dx = o.x - dis,
        dy = o.y - dis;
    cxt.beginPath();
    cxt.arc(dx + radius, y + height / 2, radius, (Math.PI / 4) * 3, (Math.PI / 4) * 5);
    cxt.lineTo(x + width / 2 - radius, dy + radius / 2);
    cxt.arc(x + width / 2, dy + radius, radius, (Math.PI / 4) * 5, (Math.PI / 4) * 7);
    cxt.lineTo(x + width / 2 + dis, y + height / 2 - radius / 2);
    cxt.arc(x + width / 2 + dis - radius, y + height / 2, radius, (Math.PI / 4) * 7, Math.PI / 4);
    cxt.lineTo(x + width / 2 + radius, y + height / 2 + dis - radius / 2);
    cxt.arc(x + width / 2, y + height / 2 + dis - radius, radius, Math.PI / 4, (Math.PI / 4) * 3);
    cxt.closePath();
}

//====================== project's utils

// map utils
export function drawCompass(ctx, x, y, w, delta = 0, ratio = 1) { //eslint-disable-line
    w = w * ratio;
    let h = w,
        pw = 3 * ratio;
    ctx.save();

    // center circle
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(0,0,0,0.25)';
    ctx.lineWidth = pw * 2 * ratio;
    ctx.arc(x, y, pw * 1.4 * ratio, 0, -Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y - h / 2);
    ctx.lineTo(x - pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x + pw, y);
    ctx.lineTo(x, y + h / 2);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 2, y);
    ctx.lineTo(x, y - pw);
    ctx.lineTo(x, y);
    ctx.lineTo(x - w / 2, y);
    ctx.lineTo(x, y + pw);
    ctx.lineTo(x, y);
    // second
    ctx.lineTo(x - w / 4, y - h / 4);
    ctx.lineTo(x - pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x - w / 4, y + h / 4);
    ctx.lineTo(x, y + pw);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 4, y + h / 4);
    ctx.lineTo(x + pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 4, y - h / 4);
    ctx.lineTo(x, y - pw);
    ctx.lineTo(x, y);
    ctx.fillStyle = 'rgba(0,0,0,0.25)';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y - h / 2);
    ctx.lineTo(x + pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x, y + h / 2);
    ctx.lineTo(x - pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 2, y);
    ctx.lineTo(x, y + pw);
    ctx.lineTo(x, y);
    ctx.lineTo(x - w / 2, y);
    ctx.lineTo(x, y - pw);
    ctx.lineTo(x, y);
    // second
    ctx.lineTo(x - w / 4, y - h / 4);
    ctx.lineTo(x, y - pw);
    ctx.lineTo(x, y);
    ctx.lineTo(x - w / 4, y + h / 4);
    ctx.lineTo(x - pw, y);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 4, y + h / 4);
    ctx.lineTo(x, y + pw);
    ctx.lineTo(x, y);
    ctx.lineTo(x + w / 4, y - h / 4);
    ctx.lineTo(x + pw, y);
    ctx.lineTo(x, y);
    // ctx.stroke();
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.fill();
    ctx.closePath();

    // labels text
    ctx.beginPath();
    ctx.font = pw * 2 * ratio + 'px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
    ctx.textAlign = 'center';
    // ctx.textBaseline = 'middle';
    ctx.fillText('N', x, y - h / 2);
    ctx.fillText('S', x, y + h / 2 + pw * 2.5);
    ctx.fillText('W', x - w / 2 - pw, y + pw);
    ctx.fillText('E', x + w / 2 + pw, y + pw);
    ctx.closePath();

    // pointer
    const pWidth = 14 * ratio,
        pHeight = 19 * ratio;
    ctx.translate(x, y);
    ctx.rotate(delta * (Math.PI / 180));
    x = 0;
    y = 0;
    ctx.beginPath();
    ctx.moveTo(x - pWidth / 2, y);
    ctx.lineTo(x, y - pHeight);
    ctx.lineTo(x + pWidth / 2, y);
    ctx.fillStyle = 'rgba(238, 85, 90, 0.8)';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    // ctx.moveTo(x - pWidth / 2, y);
    ctx.lineTo(x - pWidth / 2, y);
    ctx.lineTo(x, y + pHeight);
    ctx.lineTo(x + pWidth / 2, y);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.fill();
    ctx.closePath();

    ctx.restore();
}

export function drawPanic(ctx, x, y, w) {
    let d = Date.now() % 5 === 0;
    ctx.save();

    // light
    let l = x + w / 2,
        t = y + w / 2,
        r = w / 2;
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(238, 85, 90, 0.25)';
    // ctx.lineWidth = d ? 20 : 10;
    ctx.shadowColor = 'rgba(238, 85, 90, 9.25)';
    ctx.shadowBlur = d ? 30 : 20;
    ctx.arc(l, t, r, 0, -Math.PI * 2);
    ctx.fillStyle = 'rgba(238, 85, 90, 0.85)';
    ctx.fill();
    ctx.fillRect(x, y + r, w, (w / 3) * 2);
    ctx.closePath();

    // light inset
    l = x + w / 4;
    t = y + w / 2;
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(250, 250, 0, 0.6)';
    ctx.lineWidth = w / 5;
    ctx.lineCap = 'round';
    ctx.moveTo(l, t);
    ctx.lineTo(l, t + w / 3);
    ctx.stroke();
    ctx.closePath();

    // bottom
    l = x - w / 4;
    t = y + (w / 4) * 5.4;
    ctx.beginPath();
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.382)';
    ctx.lineWidth = w / 4;
    ctx.moveTo(l, t);
    ctx.lineTo(l + (w / 4) * 6, t);
    ctx.stroke();
    ctx.closePath();

    ctx.restore();
}
export function drawCentralPoint(ctx, x, y, w) {
    // ctx.rotate(-30 * (Math.PI / 180));
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
    ctx.arc(x, y, w * 2, 0, 2 * Math.PI);
    ctx.moveTo(x, y + w * 4);
    ctx.lineTo(x, y + w);
    ctx.moveTo(x + w * 4, y);
    ctx.lineTo(x + w, y);
    ctx.moveTo(x, y - w * 4);
    ctx.lineTo(x, y - w);
    ctx.moveTo(x - w * 4, y);
    ctx.lineTo(x - w, y);
    ctx.closePath();
}
export function drawRulers(ctx, pointer, h, ratio = 1) {
    //eslint-disable-line
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgb(255,150,0)';
    ctx.fillStyle = 'rgba(55, 55, 55, 0.99)';
    ctx.moveTo(pointer.x, 0);
    ctx.lineTo(pointer.x, h);
    ctx.moveTo(0, pointer.y);
    ctx.lineTo(h, pointer.y);
    ctx.stroke();
    // text
    ctx.font = `${10 * ratio}px Arial`;
    ctx.fillStyle = 'rgba(255,150,0,0.9)';
    ctx.textAlign = 'start';
    ctx.textBaseline = 'middle';
    ctx.fillText(pointer.mx + pointer.unit || '', pointer.x + 10 * ratio, 12 * ratio);
    ctx.fillText(pointer.my + pointer.unit || '', 5 * ratio, pointer.y + 10 * ratio);
    ctx.closePath();
    // line
    // console.error(h);
    ctx.rect(0, 0, h, h);
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();
    ctx.beginPath();
    ctx.rect(18, 20, h - 36 + 2, h - 38);
    ctx.arc(26, 20, 7, 1 * Math.PI, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(27, 34, 60, 1)';
    ctx.fill();
    //lock
    ctx.beginPath();
    ctx.arc(26, 20, 5, 1 * Math.PI, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();
}
export function drawHorizontalAxis(ctx, matrix, map, center, pointer, w, h, ratio = 1) {
    //eslint-disable-line
    ctx.beginPath();
    ctx.rect(0, 0, map.width, h);
    // ctx.lineWidth = 0.5 * ratio;
    ctx.lineWidth = 1;
    // ctx.strokeStyle = 'rgb(255,255,255)';
    // ctx.fillStyle = 'rgba(55, 55, 55, 0.8)';
    ctx.strokeStyle = 'rgb(220,220,220)';
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();
    let c = Math.floor(center.x),
        ci = Math.floor(c / w),
        i = 0 - ci;
    for (i; c + i * w < map.width; i++) {
        let x = Math.floor(c + i * w),
            isDot = Math.abs(i % 2) === 1;
        if (isDot) ctx.moveTo(x, (h * 2) / 3);
        else ctx.moveTo(x, 0);
        ctx.lineTo(x, h);

        if (Math.abs(i % 3) === 1 && !isDot) {
            ctx.font = `${10 * ratio}px Arial`;
            // ctx.fillStyle = 'rgba(255,255,255,0.85)';
            ctx.fillStyle = 'rgba(107,113,129,1)';
            ctx.textAlign = 'start';
            ctx.textBaseline = 'middle';
            let p = Point.getInstanceByAnotherMatrix(matrix, { x: x, y: 0 });
            let ps = Math.round(p.x) + pointer.unit ? Math.round(p.x) + pointer.unit : '';
            // let ps = Math.round(p.x) + pointer.unit ? pointer.unit : '';
            if (pointer.unit === 'm') ps = Math.round(p.x / 1000) + pointer.unit;
            ctx.fillText(ps, x + 10, 12 * ratio);
        }
    }

    ctx.stroke();
    ctx.closePath();

    // zero
    ctx.beginPath();
    // ctx.lineWidth = 1.5 * ratio;
    ctx.lineWidth = 1 * ratio;
    // ctx.strokeStyle = 'rgb(120,0,0)';
    ctx.moveTo(c, 0);
    ctx.lineTo(c, h);
    // text
    ctx.font = `${12 * ratio}px Arial`;
    // ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.fillStyle = 'rgba(107,113,129,1)';
    ctx.textAlign = 'start';
    ctx.textBaseline = 'middle';
    ctx.fillText(0 + pointer.unit || '0', c + 10, 12 * ratio);
    ctx.closePath();
    ctx.stroke();
}
export function drawVerticalAxis(ctx, matrix, map, center, pointer, w, h, ratio = 1) {
    //eslint-disable-line
    ctx.beginPath();
    ctx.rect(0, 0, h, map.height);
    ctx.lineWidth = 1;
    // ctx.strokeStyle = 'rgb(255,255,255)';
    // ctx.fillStyle = 'rgba(55, 55, 55, 0.8)';
    ctx.strokeStyle = 'rgb(220,220,220)';
    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
    ctx.fill();
    let c = Math.floor(center.y),
        ci = Math.floor(c / w),
        i = 0 - ci;
    for (i; c + i * w < map.height; i++) {
        let y = Math.floor(c + i * w),
            isDot = Math.abs(i % 2) === 1;
        if (isDot) ctx.moveTo((h * 2) / 3, y);
        else ctx.moveTo(0, y);
        ctx.lineTo(h, y);
        // text
        if (Math.abs(i % 3) === 1 && !isDot) {
            ctx.save();
            ctx.font = `${10 * ratio}px Arial`;
            // ctx.fillStyle = 'rgba(255,255,255,0.85)';
            ctx.fillStyle = 'rgba(107,113,129,1)';
            ctx.textAlign = 'start';
            ctx.textBaseline = 'middle';
            let p = Point.getInstanceByAnotherMatrix(matrix, { x: 0, y: y });
            let ps = Math.round(p.y) + pointer.unit ? Math.round(p.y) + pointer.unit : '';
            // let ps = Math.round(p.y) + pointer.unit ? pointer.unit : '';
            if (pointer.unit === 'm') ps = Math.round(p.y / 1000) + pointer.unit;
            // ctx.fillText(ps, 10, y + 20);
            ctx.translate(10, y);
            ctx.rotate(90 * (Math.PI / 180));
            ctx.fillText(ps, 5 * ratio, -5 * ratio);
            ctx.restore();
        }
    }
    ctx.stroke();
    ctx.closePath();

    // zero
    ctx.beginPath();
    // ctx.lineWidth = 1.5 * ratio;
    ctx.lineWidth = 1 * ratio;
    // ctx.strokeStyle = 'rgb(120,0,0)';
    ctx.moveTo(0, c);
    ctx.lineTo(h, c);
    // text
    ctx.font = `${13 * ratio}px Arial`;
    // ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.fillStyle = 'rgba(107,113,129,1)';
    ctx.textAlign = 'start';
    ctx.textBaseline = 'middle';
    ctx.fillText(0 + pointer.unit || '0', 5 * ratio, c + 10 * ratio);
    ctx.closePath();
    ctx.stroke();
}
export function drawSelectRect(ctx, x, y, w, h) {
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.rect(x, y, w, h);
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'rgb(0, 170, 61)';
    ctx.fillStyle = 'rgba(0, 170, 61, 0.1)';
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

// contours
export function drawContourLabel(ctx, l) {
    // label shape
    // let h = l.lineStrokeWidthExt,
    //     w = l.textExt.length <= 2 ? h : ctx.measureText(l.textExt).width * 100 + 300,
    //     x = l.x - w / 2,
    //     y = -(l.y + (l.lineStrokeWidthExt * 2) / 3),
    //     r = h / 2;
    // drawRoundRect(ctx, x, y, w, h, r);
    // ctx.fillStyle = l.lineStrokeExt;
    // ctx.fill();

    // labels text
    ctx.beginPath();
    ctx.font = l.textFontSizeExt + 'px Arial';
    ctx.fillStyle = l.lineStrokeExt;
    // ctx.fillStyle = l.textFillExt;
    // ctx.fillText(l.textExt, l.x + l.lineX1Ext, -l.y);
    ctx.textAlign = 'center';
    // ctx.textBaseline = 'middle';
    ctx.fillText(l.textExt, l.x, -l.y);
    ctx.closePath();
}

// paths
export function drawPath(ctx, points, width, color) {
    ctx.beginPath();
    ctx.lineWidth = width;
    let p = points;
    if (p.length === 2) {
        ctx.moveTo(p[0].x, -p[0].y);
        ctx.lineTo(p[1].x, -p[1].y);
    } else if (p.length >= 4) {
        ctx.moveTo(p[0].x, -p[0].y);
        for (let i = 1; i < p.length; i++) {
            if (i % 3 === 1) {
                let p1 = p[i],
                    p2 = p[i + 1],
                    p3 = p[i + 2];
                if (p1 && p2 && p3) {
                    ctx.bezierCurveTo(p1.x, -p1.y, p2.x, -p2.y, p3.x, -p3.y);
                } else {
                    ctx.lineTo(p[i].x, -p[i].y);
                }
            }
        }
    }
    ctx.strokeStyle = color;
    // ctx.closePath();
    // ctx.stroke();
}
export function drawPathLabel(ctx, l, color) {
    // labels connector
    ctx.beginPath();
    ctx.lineWidth = l.connectorStrokeWidthExt;
    ctx.moveTo(l.connectorX1Ext, -l.connectorY1Ext);
    ctx.lineTo(l.connectorX2Ext, -l.connectorY2Ext);
    ctx.strokeStyle = color;
    ctx.stroke();
    // ctx.closePath();

    // label shape 调整大于2个字符时背景宽度调整 author slq  2020.04.01
    let h = l.lineStrokeWidthExt,
        // w = l.textExt.length <= 2 ? h : ctx.measureText(l.textExt).width * 120 + 300,
        w = l.textExt.length <= 2 ? h : h * l.textExt.length * 0.5,
        // w = l.textExt.length <= 2 ? h : ctx.measureText(l.textExt).width * 50 + 300,
        x = l.x - w / 2,
        y = -(l.y + (l.lineStrokeWidthExt * 2) / 3),
        r = h / 2;
    drawRoundRect(ctx, x, y, w, h, r);
    ctx.fillStyle = l.lineStrokeExt;
    ctx.fill();

    // labels text
    // ctx.beginPath();
    ctx.font = l.textFontSizeExt + 'px Arial';
    ctx.fillStyle = l.textFillExt;
    ctx.textAlign = 'center';
    // ctx.textBaseline = 'middle';
    ctx.fillText(l.textExt, l.x, -l.y);
    ctx.closePath();
}
export function drawSignClosure(ctx, x, y, width) {
    let w = width * 1.6;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = width / 5;
    ctx.arc(x, y, w, 0, -Math.PI * 2);
    ctx.fillStyle = 'rgb(250, 0, 10)';
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = width / 2;
    ctx.moveTo(x - w / 2, y);
    ctx.lineTo(x + w / 2, y);
    ctx.stroke();
    ctx.closePath();
}
export function drawSignCondition(ctx, text, x, y, width) {
    let w = width * 2;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = width / 3;
    drawRoundRhombus(ctx, x - width, y - width, w, w, width / 5);
    ctx.stroke();
    ctx.fillStyle = '#ffd700';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.font = `${width * 1.6}px Arial`;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, x, y + 20);
    ctx.closePath();
}
export function drawSignRelativeSpeed(ctx, text, x, y, width) {
    let w = width * 1.6;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(250, 0, 10)';
    ctx.lineWidth = w / 3;
    ctx.arc(x, y, w, 0, -Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = '#FFFFFF';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.font = `${width * 2}px Arial`;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, x, y + 20);
    ctx.closePath();
}
export function drawSignStop(ctx, x, y, width) {
    let w = width * 2;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = w / 5;
    drawRoundRhombus(ctx, x - width, y - width, w, w, 80);
    ctx.stroke();
    ctx.fillStyle = 'rgb(250, 0, 10)';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.font = `${width / 1.2}px Arial`;
    ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('STOP', x, y + 20);
    ctx.closePath();
}
export function drawSignSpotTurn(ctx, x, y, width) {
    let w = width * 1.6;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = w / 3;
    ctx.arc(x, y, w, 0, -Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = 'rgb(30, 120, 250)';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.lineWidth = w / 6;
    ctx.moveTo(x - w / 3, y + w / 4);
    ctx.lineTo(x - w / 3, y - w / 4);
    ctx.arc(x, y - w / 4, w / 3, Math.PI, 0);
    ctx.lineTo(x + w / 3, y + w / 2);
    ctx.stroke();
    ctx.closePath();

    //
    ctx.beginPath();
    ctx.lineWidth = w / 30;
    ctx.moveTo(x - w / 3, y + w / 2);
    ctx.lineTo(x - w / 1.5, y);
    ctx.lineTo(x - w / 3, y + w / 5);
    ctx.lineTo(x, y);
    ctx.lineTo(x - w / 3, y + w / 2);
    ctx.fillStyle = '#ffffff';
    ctx.fill();
    ctx.closePath();
}
export function drawSignProhibition(ctx, text, x, y, width) {
    let w = width * 1.6;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(250, 0, 10)';
    ctx.lineWidth = w / 3;
    ctx.arc(x, y, w, 0, -Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = '#FFFFFF';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.font = `${width * 1.6}px Arial`;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, x, y + 20);
    ctx.closePath();
}
export function drawSignPermission(ctx, text, x, y, width) {
    let w = width * 1.6;
    // shape
    ctx.beginPath();
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = w / 3;
    ctx.arc(x, y, w, 0, -Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = 'rgb(30, 120, 250)';
    ctx.fill();
    ctx.closePath();

    // text
    ctx.beginPath();
    ctx.font = `${width * 1.6}px Arial`;
    ctx.fillStyle = '#ffffff';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, x, y + 20);
    ctx.closePath();
}
export function drawSignBridge(ctx, x, y, h, width) { //eslint-disable-line
    // console.log('-----> ', pos, width);
    let w = width * 6;
    // shape
    ctx.save();
    ctx.beginPath();
    // ctx.lineCap = 'square';
    ctx.strokeStyle = 'rgb(250, 0, 10)';
    ctx.lineWidth = w / 6;
    // ctx.arc(pos.x, -pos.y, w, 0, -Math.PI * 2);
    ctx.moveTo(x, y - w / 2);
    ctx.lineTo(x + w / 2, y + w / 2);
    ctx.lineTo(x - w / 2, y + w / 2);
    ctx.lineTo(x, y - w / 2);
    ctx.stroke();
    ctx.fillStyle = '#ffffff';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineCap = 'butt';
    ctx.moveTo(x - w / 3, y + w / 3);
    ctx.lineTo(x + w / 3, y + w / 3);
    ctx.arc(x, y + w / 4, w / 8, Math.PI, 0);
    ctx.strokeStyle = 'rgb(0, 0, 10)';
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = '#ffffff';
    ctx.moveTo(x, y + w / 3);
    ctx.arc(x, y + w / 3, w / 10, Math.PI, 0);
    ctx.rect(x - w / 10, y + w / 3, w / 5, w / 6);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
}
export function drawPathBridges(ctx, bridges, width = 100, color) {
    if (!bridges || !bridges.length) return;
    let sw = width / 3,
        w = width * 10, //eslint-disable-line
        l = width * 16; //eslint-disable-line
    ctx.lineWidth = sw;
    bridges.forEach(b => {
        drawBridge(ctx, b.x, -b.y, b.h, w, l, color);
        // drawCross(ctx, b.x, -b.y, b.h, width, l, color);
    });
    // bridges.forEach(b => {
    //     drawSignBridge(ctx, b.x, -b.y, b.h, width);
    // });
}
export function drawBridge(ctx, x, y, h, w, l) {
    let lineWidth = w / 16;
    ctx.save();
    ctx.lineCap = 'butt';
    ctx.translate(x, y);
    ctx.rotate(-(h * Math.PI) / 180);
    ctx.beginPath();
    ctx.moveTo(0 - l / 2, 0 - w / 2);
    ctx.lineTo(l / 6 - l / 2, w / 4 - w / 2);
    ctx.lineTo(l * (5 / 6) - l / 2, w / 4 - w / 2);
    ctx.lineTo(l - l / 2, 0 - w / 2);
    ctx.moveTo(0 - l / 2, w - w / 2);
    ctx.lineTo(l / 6 - l / 2, w * (3 / 4) - w / 2);
    ctx.lineTo(l * (5 / 6) - l / 2, w * (3 / 4) - w / 2);
    ctx.lineTo(l - l / 2, w - w / 2);
    ctx.lineWidth = lineWidth;
    ctx.stroke();
    ctx.shadowColor = '#999999';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 10;
    ctx.closePath();

    let lw = w / 6;
    ctx.beginPath();
    ctx.moveTo(l * (5 / 6) - l / 2, w / 4 - w / 2 + lw / 2 + lineWidth / 2);
    ctx.lineTo(l / 6 - l / 2, w / 4 - w / 2 + lw / 2 + lineWidth / 2);
    ctx.moveTo(l * (5 / 6) - l / 2, w * (3 / 4) - w / 2 - lw / 2 - lineWidth / 2);
    ctx.lineTo(l / 6 - l / 2, w * (3 / 4) - w / 2 - lw / 2 - lineWidth / 2);
    ctx.strokeStyle = 'rgba(250, 250, 250, 0.85)';
    ctx.lineWidth = lw;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
export function drawCross(ctx, x, y, h, width, l, color) { //eslint-disable-line
    let w = width * 6;
    ctx.save();
    ctx.lineCap = 'butt';
    ctx.translate(x, y);
    ctx.rotate(-(h * Math.PI) / 180);
    ctx.beginPath();
    // ctx.shadowOffsetX = 10;
    // ctx.shadowOffsetY = 10;
    // ctx.shadowBlur = 10;
    // ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    var grd = ctx.createLinearGradient(0 - w / 2, 0 - w / 2, 0, w / 2);
    grd.addColorStop(0, '#333333');
    grd.addColorStop(0.5, '#cccccc');
    grd.addColorStop(1, '#ffffff');
    ctx.fillStyle = grd;
    // ctx.fillStyle = 'rgb(255, 255, 255)';
    // ctx.fillRect(0 - w / 2, 0 - w / 2, w, w);
    // ctx.arc(0, 0, w / 3, Math.PI, 0);
    ctx.arc(0, 0 + width / 2, w / 3, Math.PI, 0);
    // ctx.moveTo(0, 0 - w);
    // ctx.lineTo(0, 0 - w / 3);
    ctx.fill();
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// vehicles
export function drawVehicle(ctx, img, model, tunedPos, scaling) {
    if (!tunedPos) return false;
    // 车辆模型的宽高
    let cw = model.size.x,
        ch = model.size.y;
    // console.log('[Painter] drawVehicle: ', img, cw, ch);
    if (img) {
        // ctx.restore();
        ctx.save();
        // 当前车辆位置 x,y
        ctx.translate(tunedPos.x, -tunedPos.y);
        // 当前车辆转向角度 h
        ctx.rotate(-(tunedPos.h * Math.PI) / 180);

        // let angle = (-tunedPos.h - 30) * (Math.PI / 180);
        // // let angle = -(tunedPos.h * Math.PI) / 180;
        // ctx.transform(1, 0, Math.tan(angle), 1, 0, 0);

        // let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
        // ctx.scale(scale, scale);
        // // if (o.id === 'TCVSIM01') console.log('p-painter-vehicles.refresh: ', o.id, o.tunedPos.h);

        // shadow
        if (scaling > 0.01) {
            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            ctx.shadowOffsetX = 6;
            ctx.shadowOffsetY = 6;
            ctx.shadowBlur = 20;
        }
        // console.log('[Painter] drawVehicle: ', img, cw, ch);
        ctx.drawImage(img, -cw / 2, -ch / 2, cw, ch);
        // ctx.drawImage(img, -cw, -ch, cw, ch);

        ctx.restore();
        return true;
    }
    return false;
}
// export function drawVehicleByBlobCache(ctx, model, tunedPos, scaling) {
//     let img = BlobHelper.getImgCacheBySvg(model.id),
//         cw = model.size.x,
//         ch = model.size.y;
//     // console.log('[Painter] drawVehicle: ', img, cw, ch);
//     if (img) {
//         ctx.save();
//         ctx.translate(tunedPos.x, -tunedPos.y);
//         ctx.rotate(-(tunedPos.h * Math.PI) / 180);

//         // let angle = (-tunedPos.h - 30) * (Math.PI / 180);
//         // // let angle = -(tunedPos.h * Math.PI) / 180;
//         // ctx.transform(1, 0, Math.tan(angle), 1, 0, 0);

//         let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
//         ctx.scale(scale, scale);
//         // if (o.id === 'TCVSIM01') console.log('p-painter-vehicles.refresh: ', o.id, o.tunedPos.h);

//         // shadow
//         if (scaling > 0.01) {
//             ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
//             ctx.shadowOffsetX = 6;
//             ctx.shadowOffsetY = 6;
//             ctx.shadowBlur = 20;
//         }
//         // console.log('[Painter] drawVehicle: ', img, cw, ch);
//         ctx.drawImage(img, -cw / 2, -ch / 2, cw, ch);

//         ctx.restore();
//         return true;
//     }
//     return false;
// }
export function drawVehicleByGraphs(ctx, graphs, model, tunedPos, scaling) {
    ctx.save();
    ctx.translate(tunedPos.x, -tunedPos.y);
    ctx.rotate(-(tunedPos.h * Math.PI) / 180);
    let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
    ctx.scale(scale, scale);
    // shadow
    if (scaling > 0.01) {
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
        ctx.shadowOffsetX = 6;
        ctx.shadowOffsetY = 6;
        ctx.shadowBlur = 20;
    }
    (graphs || []).forEach(g => {
        g.draw(ctx);
    });
    ctx.restore();
    return true;
}
export function drawShadow(ctx, img, model, tunedPos, scaling) {
    if (!tunedPos) return false;
    let cw = model.size.x,
        ch = model.size.y;
    if (img) {
        ctx.save();
        ctx.translate(tunedPos.x, -tunedPos.y);
        ctx.rotate(-(tunedPos.h * Math.PI) / 180);
        let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
        ctx.scale(scale, scale);
        // if (o.id === 'TCVSIM01') console.log('p-painter-vehicles.refresh: ', o.id, o.tunedPos.h);
        ctx.drawImage(img, -cw / 2, -ch / 2, cw, ch);
        ctx.restore();
        return true;
    }
    return false;
}
// export function drawShadowByBlobCache(ctx, model, tunedPos, scaling) {
//     let img = BlobHelper.getImgCacheBySvg(model.id),
//         cw = model.size.x,
//         ch = model.size.y;
//     if (img) {
//         ctx.save();
//         ctx.translate(tunedPos.x, -tunedPos.y);
//         ctx.rotate(-(tunedPos.h * Math.PI) / 180);
//         let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
//         ctx.scale(scale, scale);
//         // if (o.id === 'TCVSIM01') console.log('p-painter-vehicles.refresh: ', o.id, o.tunedPos.h);
//         ctx.drawImage(img, -cw / 2, -ch / 2, cw, ch);
//         ctx.restore();
//         return true;
//     }
//     return false;
// }
// export function drawSvgByBlobCache(ctx, name, w, h, p, scaling) {
//     let img = BlobHelper.getImgCacheBySvg(name);
//     if (img) {
//         ctx.save();
//         ctx.translate(p.x, -p.y);
//         ctx.rotate(-(p.h * Math.PI) / 180);
//         let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
//         ctx.scale(scale, scale);
//         ctx.drawImage(img, -w / 2, -h / 2, w, h);
//         ctx.restore();
//         return true;
//     }
//     return false;
// }
export function drawShadowByGraphs(ctx, graphs, model, tunedPos, scaling) {
    ctx.save();
    ctx.translate(tunedPos.x, -tunedPos.y);
    ctx.rotate(-(tunedPos.h * Math.PI) / 180);
    let scale = (1 / scaling) * 0.00618 > 1 ? (1 / scaling) * 0.00618 : 1;
    ctx.scale(scale, scale);
    (graphs || []).forEach(g => {
        g.draw(ctx);
    });
    ctx.restore();
    return true;
}

export function drawVehicleSelected(ctx, model, tunedPos, outlineStrokeWidth, scaling) { //eslint-disable-line
    if (!tunedPos) return false;
    // console.log('------> ', outlineStrokeWidth, scaling, ((outlineStrokeWidth || 60) * 1) / scaling);
    ctx.beginPath();
    ctx.translate(tunedPos.x, -tunedPos.y);
    ctx.rotate(-(tunedPos.h * Math.PI) / 180);
    ctx.strokeStyle = '#00ff55';
    // ctx.lineWidth = ((outlineStrokeWidth || 60) * 0.2) / scaling;
    ctx.lineWidth = ((outlineStrokeWidth || 60) * 1) / 1;
    // ctx.arc(0, 0, model.size.x, 0, 2 * Math.PI);
    ctx.arc(0, 0, Math.max(model.size.x, model.size.y), 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();
}
export function drawEnvelope(ctx, envelope) {
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
    ctx.lineWidth = 10;
    envelope.forEach((p, i) => {
        if (i === 0) ctx.moveTo(p.x, -p.y);
        ctx.lineTo(p.x, -p.y);
    });
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}
export function drawJobWindow(ctx, tunedPos, model, x, y, h, labels) {
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.strokeStyle = 'rgba(10, 70, 30, 0.85)';
    ctx.lineWidth = '20';
    ctx.moveTo(tunedPos.x, -tunedPos.y);
    ctx.lineTo(x - model.size.x / 2, -tunedPos.y);
    ctx.lineTo(x, y + h / 2);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.lineWidth = '80';
    ctx.moveTo(x, y);
    ctx.lineTo(x, y + h);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';

    ctx.font = '180px Arial';
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.textAlign = 'left';
    labels.forEach((v, i) => {
        ctx.beginPath();
        ctx.fillStyle = v.color || 'rgb(0,0,0)';
        ctx.fillText(v.value || v, x + 100, y + 200 * (i + 1));
        ctx.closePath();
    });
}
